<script setup>
import { ref, onMounted } from 'vue'
import { autoHover } from '@/utils/autoHover.js'
import * as echarts from 'echarts'

const echartRef = ref()
let Chart = {}

const data = [
    {
        name: '高风险',
        value: 7
    },
    {
        name: '中风险',
        value: 16
    },
    {
        name: '低风险',
        value: 77
    }
]

//加载数据
onMounted(() => {
    initChart()
    getData()
    screenAdapter()
    window.addEventListener('resize', screenAdapter)
})

//初始化图表
const initChart = () => {
    Chart = echarts.init(echartRef.value)
    const initOptions = {
        tooltip: {
            show: true
        },
        grid: {
            left: -200
        },
        series: [
            {
                name: '等级占比',
                type: 'pie',
                radius: ['50%', '65%'],
                avoidLabelOverlap: false,
                label: {
                    position: 'outside',
                    formatter: '{d}%',
                    fontSize: 14,
                    color: '#FFFFFF'
                },
                labelLine: {
                    lineStyle: {
                        width: 2
                    }
                },
                emphasis: {
                    scale: true,
                    scaleSize: 5,
                    label: {
                        show: true,
                        fontSize: '14',
                        fontWeight: 'bold',
                        color: '#fff'
                    }
                },
                data: [
                    {
                        value: 50,
                        name: '高风险',
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#FF6251'
                                    },
                                    {
                                        offset: 1,
                                        color: '#FF6251'
                                    }
                                ],
                                globalCoord: false // 缺省为 false
                            }
                        }
                    },
                    {
                        value: 40,
                        name: '中风险',
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#FFC70F'
                                    },
                                    {
                                        offset: 1,
                                        color: '#FFC70F'
                                    }
                                ],
                                globalCoord: false // 缺省为 false
                            }
                        }
                    },

                    {
                        value: 20,
                        name: '低风险',
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 1,
                                        color: '#3CFFAF'
                                    },
                                    {
                                        offset: 0,
                                        color: '#3CFFAF'
                                    }
                                ],
                                globalCoord: false // 缺省为 false
                            }
                        }
                    }
                ]
            }
        ]
    }
    Chart.setOption(initOptions)

    // 参数分别为：容器，配置，轮播数量，轮播间隔时间
    autoHover(Chart, 3, 3000)
}

//获取数据
const getData = () => {
    updateChart()
}

//屏幕适配
const screenAdapter = () => {
    Chart.resize()
}

// 更新数据 显示图标
const updateChart = () => {
    // 处理数据并且更新界面图表
    Chart.setOption({
        series: [
            {
                data: data
            }
        ]
    })
}
</script>

<template>
    <div class="com-bottom-card">
        <div class="com-card-head">
            <h1>分区风险等级占比</h1>
        </div>
        <div class="com-chart-content chart">
            <div class="pie" ref="echartRef"></div>
            <div class="legend">
                <div class="high">
                    <span></span>
                    高风险
                </div>
                <div class="middle">
                    <span></span>
                    中风险
                </div>
                <div class="low">
                    <span></span>
                    低风险
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.chart {
    gap: 20px;
    .pie {
        width: 230px;
        height: 180px;
        background-image: url(./assets/img/circle.png);
        background-repeat: no-repeat;
        background-size: 80%;
        background-position: 23.5px center;
    }
    .legend {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 20px;
        > div {
            color: #ffffff;
            display: flex;
            align-items: center;
            span {
                width: 10px;
                height: 10px;
                margin: 0 10px;
                border-radius: 50%;
                display: block;
            }
        }
        .high {
            span {
                background: #ff6251;
            }
        }
        .middle {
            span {
                background: #ffc70f;
            }
        }
        .low {
            span {
                background: #3cffaf;
            }
        }
    }
}
</style>
